<template>
    <!-- 网站页脚：包含关于我们、快速链接、联系方式、社交媒体等信息 -->
    <footer class="app-footer">
        <!-- 页脚主要内容区域 -->
        <div class="footer-content">
            <!-- 关于我们区域：介绍博客的基本信息 -->
            <div class="footer-section">
                <h3 class="footer-title">关于我们</h3>
                <p class="footer-description">
                    零の守墓人的个人博客，主要记录日常开发和生活中碰到的问题和感想。
                    致力于分享技术知识，传播编程理念。
                </p>
            </div>

            <!-- 快速链接区域：提供主要页面的快速导航 -->
            <div class="footer-section">
                <h3 class="footer-title">快速链接</h3>
                <ul class="footer-links">
                    <!-- 首页链接 -->
                    <li><router-link to="/" class="footer-link" @click="scrollToTop">首页</router-link></li>
                    <!-- 博客链接 -->
                    <li><router-link to="/blog" class="footer-link" @click="scrollToTop">博客</router-link></li>
                    <!-- 关于链接 -->
                    <li><router-link to="/about" class="footer-link" @click="scrollToTop">关于</router-link></li>
                    <!-- 联系链接 -->
                    <li><router-link to="/contact" class="footer-link" @click="scrollToTop">联系</router-link></li>
                </ul>
            </div>

            <!-- 联系方式区域：显示邮箱、地址、电话等联系信息 -->
            <div class="footer-section">
                <h3 class="footer-title">联系方式</h3>
                <ul class="footer-contact">
                    <!-- 邮箱联系方式 -->
                    <li>
                        <el-icon>
                            <Message />
                        </el-icon>
                        <span>邮箱：contact@example.com</span>
                    </li>
                    <!-- 地址联系方式 -->
                    <li>
                        <el-icon>
                            <Location />
                        </el-icon>
                        <span>地址：北京市朝阳区</span>
                    </li>
                    <!-- 电话联系方式 -->
                    <li>
                        <el-icon>
                            <Phone />
                        </el-icon>
                        <span>电话：+86 138-0000-0000</span>
                    </li>
                </ul>
            </div>

            <!-- 社交媒体区域：提供GitHub、微博、微信等社交平台链接 -->
            <div class="footer-section">
                <h3 class="footer-title">关注我们</h3>
                <div class="social-links">
                    <!-- GitHub链接 -->
                    <a href="#" class="social-link" title="GitHub">
                        <el-icon>
                            <Platform />
                        </el-icon>
                    </a>
                    <!-- 微博链接 -->
                    <a href="#" class="social-link" title="微博">
                        <el-icon>
                            <ChatDotRound />
                        </el-icon>
                    </a>
                    <!-- 微信链接 -->
                    <a href="#" class="social-link" title="微信">
                        <el-icon>
                            <ChatLineRound />
                        </el-icon>
                    </a>
                </div>
            </div>
        </div>

        <!-- 页脚底部：版权信息、法律链接和备案信息 -->
        <div class="footer-bottom">
            <!-- 版权和法律链接区域 -->
            <div class="footer-info">
                <!-- 版权信息 -->
                <p class="copyright">
                    © 2024 零の守墓人的博客. 保留所有权利.
                </p>
                <!-- 法律相关链接 -->
                <div class="legal-links">
                    <a href="#" class="legal-link">隐私政策</a>
                    <span class="separator">|</span>
                    <a href="#" class="legal-link">服务条款</a>
                    <span class="separator">|</span>
                    <a href="#" class="legal-link">免责声明</a>
                </div>
            </div>
            <!-- 备案信息区域 -->
            <div class="icp-info">
                <!-- ICP备案号 -->
                <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer" class="icp-link">
                    京ICP备2024000000号-1
                </a>
                <span class="separator">|</span>
                <!-- 公安备案号 -->
                <a href="http://www.beian.gov.cn/" target="_blank" rel="noopener noreferrer" class="icp-link">
                    <img src="../assets/pic/beian.png" alt="备案图标" class="beian-icon" />
                    京公网安备 11010502030123号
                </a>
            </div>
        </div>
    </footer>
</template>

<script setup lang="ts">
/**
 * 导入Element Plus图标组件
 * @description 用于页脚中显示各种联系方式和社交媒体的图标
 */
import {
    Message,         // 消息图标，用于邮箱联系方式
    Location,        // 位置图标，用于地址联系方式
    Phone,           // 电话图标，用于电话联系方式
    Platform,        // 平台图标，用于GitHub链接
    ChatDotRound,    // 聊天图标，用于微博链接
    ChatLineRound    // 聊天线图标，用于微信链接
} from '@element-plus/icons-vue'

/**
 * 滚动到页面顶部
 * @description 点击页脚链接时自动滚动到页面顶部，提升用户体验
 */
const scrollToTop = () => {
    // 平滑滚动到页面顶部
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    })
}
</script>

<style scoped lang="scss">
// 导入页脚组件样式
@use '../assets/styles/components/_footer';
</style>